<template>
  <div class="cs-page-container">
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 250px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="属性ID" prop="id">
        </el-table-column>
        <el-table-column align="center" label="属性名" prop="label">
        </el-table-column>
        <el-table-column align="center" label="属性编码" prop="value">
        </el-table-column>
        <el-table-column align="center" label="父属性" prop="parent">
          <template slot-scope="{ row }">{{
            typeItems[row.parent]
            }}</template>
        </el-table-column>
        <el-table-column align="center" label="是否显示" prop="parent">
          <template slot-scope="{ row }">{{
            row.onShow === 1 ? '显示': '隐藏'
            }}</template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="80"
        >
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="onEdit(row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="dialogVisible" append-to-body class="dialog-class">
      <el-form :model="formData" label-width="80px">
        <el-form-item label="父属性">
          <el-select
            v-model="formData.parent"
            filterable
            placeholder="父属性"
          >
            <el-option v-for="item in types" :value="item.id" :label="item.label" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否隐藏">
          <el-select
            v-model="formData.onShow"
            filterable
            placeholder="是否隐藏"
          >
            <el-option :value="1" label="显示" />
            <el-option :value="0" label="隐藏" />
          </el-select>
        </el-form-item>
        <el-form-item label="属性名：">
          <el-input
            v-model="formData.label"
            placeholder="填写属性名称"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="_onEdit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import { xhrPropChangeValue, xhrPropChangeOptions } from '@/api/account'
    export default {
      name: "propSetting",
      data() {
        return {
          dialogVisible: false,
          formData: {
            label: null,
            parent: null,
            onShow: null
          },
          list: [],
          types: [],
          typeItems: {}
        }
      },
      created() {
        this.doSearch()
      },
      methods: {
        doSearch() {
          xhrPropChangeOptions({}).then(resp => {
            this.list = resp.data.reasons
            this.types = resp.data.types
            for (let i in resp.data.types){
              this.typeItems[resp.data.types[i].id] = resp.data.types[i].label
            }
            console.log(this.typeItems)
          }).catch(resp => {
            console.log(resp)
          })
        },
        onEdit(row){
          console.log("onEdit")
          this.dialogVisible = true
          this.formData = row
          console.log(this.formData)
        },
        _onEdit(){
          console.log("_onEdit")
          xhrPropChangeValue(this.formData).then(resp =>{
            console.log(resp)
            this.$message.success("请求成功")
            this.dialogVisible = false
          }).catch(resp => {
            console.log(resp)
            this.$message.success(resp)
          })
        }
      }
    }
</script>

<style scoped>

</style>
